<template>
	<div class="myComment">
		<x-header title="我的评价" :left-options="{backText:''}" class="whiteHeader"></x-header>
		<div class="allCommentMess" v-if='allcomment'>
			<scroller :on-infinite="infinites" class='myScroller' ref='myScroller' :loadingLayerColor='loadColor'>
				<div class="userMess">
					<div class="uLeft" @click='goUserInfoCenter'>
						<img :src="allcomment.HEADPHOTO" alt="" />
						<div>
							<h1>{{allcomment.USERNAME}}</h1>
							<p>评价晒单最多可获20个通币哦~</p>
						</div>
					</div>
					<div class="goComment" @click='goComments'>写评价</div>
				</div>
				<div class="allComment">
					<div class="comments">
				        <div class="commentsItem" v-for='(item,index) in commentMess' :key="index">
				          <div class="comHead">
				            <div class="userName uLeft">
				            	<img :src="item.HEADPHOTO" alt="" />
								<div>
									<h2>{{item.USER_NAME | fiterPhone}}</h2>
									<p>{{item.CREATE_TIME | filterTime5}}</p>
								</div>
				            </div>
				            <div class="star">
				              <span v-for='i in Number(item.SCORE)' :key="i"></span>
				            </div>
				          </div>
				          <div class="comMain">
				            <div class="conTitle">
				              {{item.CONTENT}}
				            </div>
				            <div class="comImg">
				              <img :src="item.PHOTO1" alt="" @click='showImg' v-if='item.PHOTO1'>
				              <img :src="item.PHOTO2" alt="" @click='showImg' v-if='item.PHOTO2'>
				              <img :src="item.PHOTO3" alt="" @click='showImg' v-if='item.PHOTO3'>
				              <img :src="item.PHOTO4" alt="" @click='showImg' v-if='item.PHOTO4'>
				            </div>
				            <!-- <div class="replayCom" v-if='item.REPLY_CONTENT'>
				              <span></span>
				              {{item.REPLY_CONTENT}}
				            </div> -->
				            <div class="shopMess" v-if='item.DETAIL_LIST.length>0' @click='goOrderDetail(item)'>
				            	<div class="type1" v-if='item.DETAIL_LIST[0].FIRST_CLASS!=10001&&item.DETAIL_LIST[0].FIRST_CLASS!=10003'>
				            		<div class="shopItem" v-for='items in item.DETAIL_LIST'>
					            		<img :src="items.COVER_IMG" alt="" />
					            		<div class="shopDetailMess">
					            			<h2>{{items.SUBJECT}}</h2>
					            			<p>数量：{{items.QUANTITY}}</p>
					            		</div>
					            	</div>
				            	</div>
				            	<div class="type2" v-else>
				            		<div class="shopItem">
					            		<img :src="item.DETAIL_LIST[0].COVER_IMG" alt="" />
					            		<div class="shopDetailMess">
					            			<h2><span v-for='itemss in item.DETAIL_LIST'>{{itemss.SUBJECT}},</span></h2>
					            			<p>数量：{{item.DETAIL_LIST.length}}</p>
					            		</div>
					            	</div>
				            	</div>
				            </div>
				          </div>
				          <!-- <p class="zan">20人觉得有用</p> -->
				        </div>
				    </div>
				</div>
		    </scroller>
		</div>
		<div class="noComment" v-if='allcomment&&commentMess.length==0'>
	    	<img src="../../assets/image/mine/noComment.png" alt="" />
	    	<p>暂无评论，快去评论赚通币</p>
		</div>
	</div>
</template>
<script>
/*我的评价*/
import { XHeader } from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
	name: "myComment",
	// 数据
	data() {

		return {
			userId: '',
			page:1,
			commentMess:[],  //评论数据
			canRequest:false,
			allcomment:'',
			loadColor:'#fff'
		}
	},
	// 计算属性
	computed: {

	},
	beforeRouteLeave (to, from, next) {
	    // 导航离开该组件的对应路由时调用
	    // 可以访问组件实例 `this`
	    this.$vux.loading.hide();
	    next();
	},
	// 创建（实例创建完成）
	created() {
		this.userId = getCookie('loginkey');
		this.getComment();
		this.$vux.loading.show({
		 text: ''
		})
	},
	// el被创建，并挂载到实例上
	mounted() {

	},
	// 方法（实例中的方法）-----------
	methods: {
		goComments(){
			this.$router.push('/order/3');
		},
		goUserInfoCenter(){
			this.$router.push('/personalInfo');
		},
		infinites(){
			if(!this.canRequest){
				this.getComment();
			}
		},
		goOrderDetail(item){
			if(item.ACTTYPE=='17092852'){
				this.$router.push('/gOrderDetail/'+item.ORDER_ID)
			}else{
				this.$router.push('/orderDetail/'+item.ORDER_ID)
			}
		},
		getComment(){
			this.canRequest=true;
			this.$fetchPost('/ServCommentWeb/myOrderComment.action',{USER_ID:this.userId,PAGE_NO:this.page}).then(res=>{
	          if(res.STATUS_CODE==1){
	          	this.canRequest=false;
	          	this.$vux.loading.hide();
	          	if(!this.allcomment){
	              	this.allcomment=res.RESULT_DATA;
	            }
	            if(res.RESULT_DATA.COMMENT_LIST.length==0){
	              if(this.page!=1){
	              	this.$refs.myScroller.finishInfinite(2);
	              }else{
	              	this.loadColor='#fff';
	              }
	            }else{
	              this.loadColor='#666';
	              this.commentMess=this.commentMess.concat(res.RESULT_DATA.COMMENT_LIST);
	              this.page++;
	              this.$refs.myScroller.finishInfinite();
	            }
	          }
	        },err=>{
	          console.log(err);
	        })
		},
		//点击图片全屏显示
	    showImg (e) {
	        var commentImgBg = document.createElement('div');
	        commentImgBg.style.cssText = 'position: fixed;\
	                                      top: 0;\
	                                      left: 0;\
	                                      right: 0;\
	                                      bottom: 0;\
	                                      z-index:999;\
	                                      background-color: #000;';
	        var commentImg = document.createElement('img');
	        commentImg.style.cssText = 'width: 100%;\
	                                    position: fixed;\
	                                    left: 50%;\
	                                    top: 50%;\
	                                    -webkit-transform: translate(-50%,-50%);\
	                                    transform: translate(-50%,-50%);'
	        commentImg.src = e.target.src;
	        commentImgBg.appendChild(commentImg);

	        commentImgBg.onclick = function () {
	          document.body.removeChild(commentImgBg)
	        }
	        document.body.appendChild(commentImgBg)
	    }
	},
	// 子组件
	components: {
		XHeader
	}
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.myComment {
	background: #fff;
	height: 100%;
	min-height: 100%;
	.noComment{
		position: fixed;
		top: 50%;
		left: 50%;
		transform:translate(-50%,-50%);
		img{
			display: block;
			width: 2rem;
			height: 1.86rem;
			margin: 0 auto;
		}
		p{
			font-size: 0.25rem;
			color: #666;
			margin-top: 0.3rem;
		}
	}
   .allCommentMess{
   	   .uLeft{
   	 		display: flex;
	   	 	align-items:center;
	   	 	width: 100%;
	   	 	padding-right: 0.1rem;
			img{
				width: 0.9rem;
				height: 0.9rem;
				border-radius: 0.45rem;
				display: block;
			}
			div{
				padding-left: 0.15rem;
				text-align: left;
				h1{
					font-size: 0.3rem;
					color: #222222;
					margin-bottom: 0.1rem;
				}
				p{
					font-size: 0.25rem;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
			}
   	 	}
   	  .comments{
   	  	  .zan{
   	  	  	font-size: 0.22rem;
   	  	  	color: #999999;
   	  	  	padding:0 0 0.2rem 0.1rem;
   	  	  	text-align: left;
   	  	  }
	      h1{
	        font-size: 0.3rem;
	        color: #a4a6ad;
	        height: 0.9rem;
	        line-height: 0.9rem;
	        text-align: left;
	        /* .borderBFu(#e3e3e3); */
	      }
	      .commentsItem{
	        padding:0 0.2rem 0.2rem;
	        border-bottom: 0.2rem solid #F5F5F5;
	        .comHead{
	          display: flex;
	          justify-content:space-between;
	          padding: 0.25rem 0 0.2rem;
	          .star{
	            display: flex;
	            align-items:center;
	            span{
	              width: 0.26rem;
	              height: 0.26rem;
	              margin: 0.15rem 0.05rem;
	              background: url(../../assets/image/carProduct/star.png) no-repeat;
	              background-size: 0.26rem 0.26rem;
	            }
	          }
	          .userName{
	            h2{
	            	font-size: 0.28rem;
	            	color: #222;
	            }
	            img{
            		width: 0.7rem!important;
            		height: 0.7rem!important;
            	}
            	p{
            		color: #999999;
            		font-size: 0.24rem;
            	}
	          }
	        }
	        .comMain{
	          padding:0.1rem 0;
	          .conTitle{
	            text-align: left;
	            font-size: 0.28rem;
	            color: #333333;
	            line-height: 1.3;
	          }
	          .comImg{
	            font-size: 0;
	            text-align: left;
	            img{
	              width: 1.75rem;
	              height: 1.75rem;
	              border-radius: 0.2rem;
	              padding: 2% .1rem;
	              box-sizing: border-box;
	            }
	          }
	          .replayCom{
	            width: 96%;
	            padding: 0.1rem;
	            border-radius: 0.1rem;
	            margin: 0.18rem auto 0.05rem;
	            color: #999;
	            background: #e6e6e6;
	            font-size: 0.3rem;
	            text-align: left;
	            position: relative;
	            span{
	              border:0.2rem solid #e6e6e6;
	              border-width: 0.2rem 0.2rem 0 0;
	              transform:rotate(45deg);
	              position: absolute;
	              top: -0.1rem;
	              left: 0.4rem;
	              background: #e6e6e6;
	            }
	          }
	          .shopMess{
	          	.shopItem:first-child{
	          		margin-top: 0.2rem;
	          	}
	          	.shopItem{
	          		width: 6.9rem;
	          		height: 1.6rem;
	          		background: #F6F6F6;
	          		display: flex;
	          		margin: 0rem auto;
	          		align-items:center;
	          		.borderBFu(#ccc);
	          		img{
	          			width: 1.2rem;
	          			height: 1.2rem;
	          			min-width: 1.2rem;
	          			display: block;
	          			margin: 0 0.2rem;
	          		}
	          		.shopDetailMess{
	          			text-align: left;
						h2{
							font-size: 0.28rem;
							color: #888;
							margin-bottom: 0.2rem;
							overflow: hidden;
							white-space: nowrap;
							text-overflow:ellipsis;
							padding-right: 0.1rem;
							width: 5.4rem;
						}
						p{
							font-size: 0.24rem;
							color: #999;
						}
	          		}
	          	}
	          	.shopItem:last-child{
	          		.borderBFu(#F6F6F6);
	          	}
	          }
	        }
	      }
	  }
   	 .userMess{
   	 	display: flex;
   	 	justify-content:space-between;
   	 	align-items:center;
   	 	height: 1.8rem;
   	 	padding: 0 0.3rem;
   	 	margin-top: 0.8rem;
   	 	border-bottom: 0.2rem solid #F5F5F5;
   	 	.goComment{
			width: 1.5rem;
			min-width: 1.5rem;
			height: 0.6rem;
			color: #fff;
			background: #F22E2E;
			border-radius: 0.3rem;
			font-size: 0.26rem;
			line-height: 0.6rem;
   	 	}
   	}
   }
}
</style>